import { defineComponent, h, ref } from 'vue';
import { Modal } from 'ant-design-vue';
import { omit } from 'lodash-es';

export default defineComponent({
  components: {
    [Modal.name]: Modal,
  },
  props: {
    modalProps: {
      type: Object,
      default: () => ({}),
    },
    formProps: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['vanish'],
  setup(props, context) {
    const { emit } = context;
    const modalRef = ref();
    const visibleModel = ref<boolean>(true);
    const handleOk = () => {
      modalRef.value.submit().then(() => {
        props.modalProps?.onFinish();
        visibleModel.value = false;
      });
    };

    const handleCancel = () => {
      emit('vanish');
    };

    return () => (
      <a-modal
        v-model:visible={visibleModel.value}
        {...omit(props.modalProps, ['content', 'onFinish'])}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        {h(props.modalProps.content, {
          ref: modalRef,
          ...props.formProps,
        })}
      </a-modal>
    );
  },
});
